import React from 'react';
import { observer, inject } from 'mobx-react';
import ListView from '../../../common/list-view';
import { Card,Tools } from 'weaver-mobile';
import { FROMWEITETABKEYS } from '../../../constants/form';
import { Fillinfrequency, Submissionauthority } from './contants';
import classNames from 'classnames';
const getLabel = Tools.getLabel;
const fillinFrequencyNames = Fillinfrequency();
const submissionauthorityNames = Submissionauthority();

@inject('writeStore')
@observer
export default class FillListView extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.writeStore;
    this.state = { timeSign: '' };
  }

  componentDidMount() {
    const timeSign = new Date().getTime();

    this.setState({ timeSign });

    if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('registerBroadcast')) {
      window.em.registerBroadcast({
        'name': `edcMobileFill_${timeSign}`,
        'action': () => {
          this.store.init();
        }
      })
    }
  }

  renderRow = (datas) => {
    const { _key } = this.props;
    const { 
      name, 
      createdate, 
      createtime, 
      creator, 
      fillinfrequency, 
      submissionauthority, 
      modedatacreatedate, 
      modedatacreatetime, 
      fillinenabled,
      shortkey,
      id
    } = datas;
    const isCollecting = Number(fillinenabled) === 1;

    let url = `/edc/formview/${shortkey}?data=${id}`;
    let target = '_blank';
    const backBtnAble = window.backBtnAble;

    if (backBtnAble) { //判断是否在em7中打开，添加返回按钮 
      target = '_self';
    }

    return (
      <div className='edc-write-item'>
        <a onClick={() => this.goto(url, target)}>
          <Card>
            <Card.Header title={name} />
            <div className='main'>
              <div className='text'>
                <div>{creator}</div>
                <div>{createdate} {createtime}</div>
                {_key === FROMWEITETABKEYS.FILLED && <div>{getLabel('25380','填写时间')} ：{modedatacreatedate} {modedatacreatetime}</div>}
              </div>
              <div className={classNames('status', { stop: !isCollecting })}>
                {isCollecting ?  getLabel(523252, '收集中') :  getLabel(523323, '已停止')}
              </div>
            </div>
            <div className='item-footer'>
              <span>{submissionauthorityNames[submissionauthority]}</span>
              <span>{fillinFrequencyNames[fillinfrequency]}</span>
            </div>
          </Card>
        </a>
      </div>
    );
  }


  goto = (url, target) => {
    const { timeSign } = this.state;

    if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('openLink')) {
      url += `&registerSign=${timeSign}`;

      window.em.openLink({
        url: url,
        openType: 2,
        sysId: window.localStorage.emobile_ec_id,
      });
    } else if (target === '_blank') {
      window.open(url);
    } else {
      url += '&backBtnAble=true';

      window.location.href = url;
    }
  }

  render() {
    const { visible, store } = this.props;

    return (
      <ListView
        visible={visible}
        store={store.list}
        renderRow={this.renderRow}
      />
    )
  }
}